<template>
  <v-layout>
    <default-header></default-header>
    <default-aside></default-aside>

    <v-navigation-drawer location="right" permanent width="300">
      <div class="mainRight">
        <v-card
          title="This is a title"
          subtitle="This is a subtitle"
          text="This is content"
        ></v-card>
        <v-card
          title="This is a title"
          subtitle="This is a subtitle"
          text="This is content"
        ></v-card>
        <v-card
          title="This is a title"
          subtitle="This is a subtitle"
          text="This is content"
        ></v-card>
        <v-card
          title="This is a title"
          subtitle="This is a subtitle"
          text="This is content"
        ></v-card>
        <v-card
          title="This is a title"
          subtitle="This is a subtitle"
          text="This is content"
        ></v-card>
      </div>
    </v-navigation-drawer>

    <v-main class="h-screen overflow-auto">
      <div class="mainContent">
        <div class="mainContentLine">
          <v-card
            title="This is a title"
            subtitle="This is a subtitle"
            text="This is content"
          ></v-card>
          <v-card
            title="This is a title"
            subtitle="This is a subtitle"
            text="This is content"
          ></v-card>
          <v-card
            title="This is a title"
            subtitle="This is a subtitle"
            text="This is content"
          ></v-card>
        </div>
        <div class="mainContentLine">
          <v-card
            title="This is a title"
            subtitle="This is a subtitle"
            text="This is content"
          ></v-card>
          <v-card
            title="This is a title"
            subtitle="This is a subtitle"
            text="This is content"
          ></v-card>
          <v-card
            title="This is a title"
            subtitle="This is a subtitle"
            text="This is content"
          ></v-card>
        </div>
        <div id="main" style="width: 600px; height: 400px"></div>
      </div>
    </v-main>
  </v-layout>
</template>

<style scoped></style>

<script>
import * as echarts from "echarts";

export default {
  setup() {
    const initEchart = () => {
      let myChart = echarts.init(document.getElementById("main"));
      let option = {
        title: {
          text: "",
        },
        tooltip: {},
        legend: {
          data: [""],
        },
        xAxis: {
          data: [""],
        },
        yAxis: {},
        series: [
          {
            name: "",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };
      myChart.setOption(option);
    };

    onMounted(() => {
      initEchart();
    });
    return {};
  },
};
</script>

<style lang="scss">
.tabs {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  .v-tab {
    flex: 1;
  }
  //   width: 200px;
}
.v-main {
  display: flex;
  justify-content: space-between;
}
.mainContent {
  margin-left: 10px;
  height: 100%;
  width: 100%;
  //   border: 1px solid black;
  .mainContentLine {
    display: flex;
    width: 100%;
    .v-card {
      flex: 1;
      margin: 10px;
      width: 30%;
    }
  }
}
.mainRight {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  .v-card {
    margin-bottom: 10px;
  }
}
</style>
